<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小白影院订票系统</title>

<link rel="stylesheet" href="css/step.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="demo-files/demo.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/img.css">
<link rel="stylesheet" href="css/seat.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/progressStep.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$(".bs-glyphicons li").click(function(){
		var cls = $(this).attr("class");
		if(cls == "sold"){
			alert("已售出");
		}else if(cls == "selected"){
			$(this).removeClass("selected");
		}else{
			$(this).addClass("selected");
		}
	});
});
</script> 
</head>
<body>

	<div class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">小白影院订票系统</a>
        </div>
        <div class="navbar-collapse collapse">
          
        </div><!--/.navbar-collapse -->
      </div>
    </div>



    <div class="container">
		<div class="row">
			<div class="col-lg-3">
				<ul class="nav nav-pills nav-stacked">
				 <li><a href="#"><span class="icon-film"></span><span class="mls"> 浏览影片</span></a></li>
				<li><a href="#"><span class="icon-clock"></span><span class="mls"> 选择场次</span></a></li>
				<li  class="active"><a href="#"><span class="icon-users"></span><span class="mls"> 选择座位</span></a></li>
				<li><a href="#"><span class="icon-cart"></span><span class="mls"> 提交订单</span></a></li>
				<li><a href="#"><span class="icon-cart3"></span><span class="mls"> 查看订单</span></a></li>
				</ul>
			</div>
			<div class="col-lg-9">
			<div class="row" style="background-color:#FF9900" align="center">屏幕</div>
				<div class="bs-docs-section">
					<ul class="bs-glyphicons">						
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li class="sold">
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
						<li>
							<div class="clearfix bshadow0 pbs">
							<span class="icon-user2"></span>				 				
							</div>
						</li>
					</ul>
				</div>
				<div class="row">
					<div class="col-xs-12 col-sm-12 text-center" >
						<div class="radio-inline">
						  <label>
							<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
							普通票（65元） 
						  </label>
						</div>                            
						<div class="radio-inline">
						  <label>
							<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
							团体票（30元×6）
						  </label>
						</div>                    
						<div class="radio-inline">
						  <label>
							<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
							学生票（35元）
						  </label>
						</div>
					</div>
				</div>
					<div class="row">
                        <div class="col-xs-12 col-sm-12 text-center">
                            <a href="pay.html" class="btn btn-primary" role="button">确认购买</a>
                        </div>
                    </div>
                    <div class="row">
                    	<div class="col-xs-12 col-sm-12">&nbsp;</div>
                    </div>
			</div>
			 <div class="row">
				<div class="col-xs-12 col-sm-12 text-center">
					<div class="panel panel-default">
					  <div class="panel-heading">说明</div>
					  <div class="panel-body text-left">
						<p>1.红色代表已售出座位</p>
						<p>1.绿色代表已选中座位</p>
					  </div>
					</div>
				</div>
            </div>
		</div>
			
		
		
		
      <hr>
      <footer>
       <center>
        <p>&copy; Company 2013</p>
		</center>
      </footer>
    </div> <!-- /container -->


</body>
</html>
